<template>
	<view class="team">
		<view class="bgCol"></view>
		<view class="list">
			<view class="tongji dFlex jAround_aCenter fWap">
				<!-- <view class="project"> <view class="title">车辆类型</view> <view class="val">普通货车</view> </view> -->
				<view class="project"> <view class="title">车辆数量</view> <view class="val">{{carInfo.total1}}辆</view> </view>
				<view class="project"> <view class="title">车辆载重</view> <view class="val">{{carInfo.total1}}吨</view> </view>
				<view class="project"> <view class="title">闲置车辆</view> <view class="val">{{carInfo.total2}}辆</view> </view>
				<view class="project"> <view class="title">非闲车辆</view> <view class="val">{{carInfo.total3}}辆</view> </view>
				<view class="project"> <view class="title">总载重数</view> <view class="val">{{carInfo.total4}}吨</view> </view>
			</view>
			<view class="members">
				<view class="memberOne" v-for="(item,index) in carInfo.list" :key='index'> 
					<view class="user dFlex jStart_aCenter">
						<!-- <view class="userTx imgPublic">
							<image src="../static/logo.png" mode="widthFix"></image>
						</view> -->
						<view class="userInfo">
							<view class="nickname dFlex jBetween_aEnd">
								<view class="showName dFlex jStart_aCenter">
									<text style="display: inline-block;margin-right: 8px;">{{item.trueName?item.trueName:'-'}}</text>
									<view class="free">{{item.is_use == "1" ? "闲置" : '非闲置'}}</view>
								</view>
								
								<view class="toolBtn dFlex jEnd_aEnd">
									<u-icon name="edit-pen" size='20px' :stop='true' @click='editCar(item)'></u-icon>
								</view>
							</view>
							<view class="tel">{{item.tel}}</view>
						</view>
					</view>
					<view class="info">
						<view class="line1 dFlex jStart_aCenter">
							<text>随车手机</text>
							<view class="val dFlex jStart_aCenter">
								<text>{{item.tel2}}</text>
								<view class="dh imgPublic" @click='makeCall(item.tel2)'>
									<image src="../static/images/dianhua@2x.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="line1 dFlex jBetween_aCenter">
							<text>车牌号码</text>
							<view class="val">{{item.car_number}}</view>
						</view>
						<view class="line1 dFlex jBetween_aCenter">
							<text>车载吨数</text>
							<view class="val">{{item.car_load}}吨</view>
						</view>
						<view class="line1 dFlex jBetween_aCenter"> 
							<text>车辆类型</text>
							<view class="val">{{item.car_type}}</view>
						</view>
					</view>
					<view class="user dFlex jStart_aCenter">
						
						<view class="userInfo">
							<view class="nickname dFlex jBetween_aEnd">
								
								<view class="showName dFlex jStart_aCenter">
									
									<view class="free" v-if="item.status==1" style="background-color: #333;color:#fff;font-size: 14px;">待审核</view>
									<view class="free" v-if="item.status==2" style="background-color: green;color:#fff;font-size: 14px;">已通过审核</view>
									<view class="free" v-if="item.status==3" style="background-color: red;color:#fff;font-size: 14px;">未通过审核</view>
								</view>
								
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btns dFlex jAround_aCenter" :style="{
			'padding-bottom':isIos ? 'env(safe-area-inset-bottom)' : '12px'
		}">
			<view class="btn len1 sty1" @click='editCar("")'>添加车辆</view>
		</view>
	</view>
</template>

<script>
	import {
		carList
	} from '@/tool/http.js';
	export default {
		data() {
			return {
				isIos:getApp().globalData.isIos,
				carInfo:{
					total1:0,
					total2:0,
					total3:0,
					total4:0,
					list:[],
				}
			};
		},
		onShow(){
			this.initCarList();
		},
		methods:{
			// 车队信息
			async initCarList(){
				let res = await carList({
					memberId:uni.getStorageSync('uid'),
				});
				console.log(res);
				if(res){
					this.carInfo = res;
				}
			},
			// 拨打电话
			makeCall(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			// 添加、编辑车辆
			editCar(car){
				uni.navigateTo({
					url:'./editCar?carId='+(car.id ? car.id : ''),
				})
			}
		}
	}
</script>

<style lang="scss">
	.btns{
		.btn{
			width:100%;
			padding: 10px 0;
			border-radius: 4px;
			text-align: center;
			border:1px solid #f6f6f6;
		}
		.len1{
			width: 100%;
		}
		
		.sty1{
			color: white;
			background: #0087FC;
			border-color: #0087FC;
		}
		width:100%;
		position: fixed;
		left:0;
		bottom: 0;
		padding: 12px;
		box-sizing: border-box;
	}
	.list{
		.memberOne{
			.info {
				.line1 {
					width: 100%;
					margin-bottom: 8px;
					color: #666666;
					.val {
						.dh{
							width: 18px;
							height: 18px;
							margin-left: 10px;
						}
						flex: 1;
						margin-left: 12px;
						color: #222222;
					}
				}
				width: 100%;
				padding: 10px 0;
			}
			.user{
				.userInfo{
					.tel{
						font-size: 12px;
						color: #999999;
						margin-top: 3px;
					}
					.nickname{
						.free{
							display: inline-block;
							font-size: 10px;
							color: #0087FC;
							background: rgba(0, 135, 252, 0.2);
							padding: 2px 4px;
							border-radius: 3px;
							vertical-align: middle;
						}
						.toolBtn{
							width:max-content;
						}
						width: 100%;
					}
					flex: 1;
				}
				.userTx{
					width: 43px;
					height: 43px;
					border-radius: 50%;
					margin-right: 12px;
				}
				padding: 12px 0;
				border-bottom: 1px solid #EEEEEE;
			}
			width: 100%;
			padding: 0 12px;
			box-sizing: border-box;
			background: white;
			border-radius: 5px;
			margin-bottom: 12px;
		}
		.tongji{
			.project{
				.val{
					color: #111111;
					font-size: 15px;
					font-weight: bold;
					margin-top: 8px;
				}
				width: 33%;
				text-align: center;
				color:#999999;
				font-size: 12px;
				margin-bottom: 18px;
			}
			width: 100%;
			padding: 18px 18px 0;
			box-sizing: border-box;
			background: white;
			border-radius: 10px;
			margin-bottom: 12px;
		}
		width: calc(100% - 24px);
		margin: 0 auto;
		position:relative;
		top: -88px;
	}
	.bgCol{
		width: 100%;
		height: 100px;
		background: #0087FC;
	}
</style>
